<script setup>
import { message } from 'ant-design-vue'
import problemApi from '@/api/problem/problemApi';
import fileApi from '@/api/dev/fileApi';

import XnFilePreview from '@/components/XnFilePreview/index.vue'


const tableRef = ref();

const search = ref();

const fileViewFlag = ref(false);
const columns = ref(
	[
		{
			title: '上传账号',
			dataIndex: 'accountNo',
			key: 'accountNo',
			ellipsis: true,
		},
		{
			title: '上传人姓名',
			dataIndex: 'userName',
			key: 'userName',
			ellipsis: true,
		},
		{
			title: '描述',
			dataIndex: 'description',
			resizable: true,
			key: 'description',
			ellipsis: true,
		},
		{
			title: '上报时间',
			dataIndex: 'reportTime',
			key: 'reportTime',
			ellipsis: true,
		},
		{
			title: '上报IP',
			dataIndex: 'reportIp',
			key: 'reportIp',
			ellipsis: true
		},
		{
			title: '上报MAC地址',
			dataIndex: 'reportMac',
			key: 'reportMac',
			ellipsis: true
		},
		{
			title: '状态',
			dataIndex: 'status',
			key: 'status',
			mapping: [{
				key: '1',
				value: '已上报'
			},
			{
				key: '2',
				value: '已确认未解决'
			},
			{
				key: '3',
				value: '解决中'
			},
			{
				key: '4',
				value: '已解决待反馈'
			},
			{
				key: '5',
				value: '反馈解决完成'
			}],
			fixed: 'right'
		},
		{
			title: '操作',
			dataIndex: 'action',
			key: 'action',
			width: 410,
			fixed: 'right',
			buttonList: [
				{
					click: (field, record) => {

						alert(1)

					},
					type: "primary",
					render: (record) => {

						if (record.status == 1) {
							return "确认问题";
						} else if (record.status == 2) {
							return "开始解决";
						} else if (record.status == 3) {
							return "解决完成";
						} else if (record.status == 4) {
							return "反馈没问题";
						}
						return null;

					}
				},
				{

					click: async (field, record) => {

						await loadFileList(record);
						fileViewFlag.value = true;
					},
					render: (record) => {

						return "附件";
					}
				},
			]
		},
	])

const refresh = () => {
	tableRef.value.refresh();

}

const currentFileList = ref([])

const loadFileList = async (d) => {
	const fileList = await fileApi.fileListByRelationId({
		relationId: d.id,
		relationTypeCode: "PROBLEM"
	})
	currentFileList.value = fileList;
	// console.log(fileList)
}
const loadData = async () => {
	const d = await problemApi.list();
	return d;
}

</script>

<template>

	<a-row :gutter="10" class="mb-2">
		<a-col :span="24">
			<a-card>
				<a-space>
					<a-input-search placeholder="请输入内容" v-model:value="search" @search="refresh"></a-input-search>
				</a-space>
			</a-card>
		</a-col>
	</a-row>
	<a-row :gutter="10" class="mb-2">
		<a-col :span="24">
			<a-card>
				<h-table :paged="false" ref="tableRef" :data="loadData" :columns="columns" height="calc(70vh)">
				</h-table>
			</a-card>
		</a-col>
	</a-row>



	<a-modal v-model:open="fileViewFlag" :footer="null" :closable="false" width="100%" height="100%"
		wrap-class-name="full-modal">
		<XnFilePreview
		@goBack="fileViewFlag=false"
		v-for="(item,index) in currentFileList" :src="'/api/dev/file/download?id='+item.downloadPath" :fileType="item.suffix"></XnFilePreview>
	</a-modal>

</template>




<style scoped lang="less">
.full-modal {
	.ant-modal {
		max-width: 100%;
		top: 0;
		padding-bottom: 0;
		margin: 0;
	}

	.ant-modal-content {
		display: flex;
		flex-direction: column;
		height: calc(100vh);
	}

	.ant-modal-body {
		flex: 1;
	}
}

.my-modal {
	.ant-modal-footer {
		margin-bottom: 15px !important;
		z-index: 999 !important;
	}
}
</style>
